<div>
    <nav class="navbar navbar-default navbar-fixed-top animated slideInDown" style="opacity: .85;">
        <div class="container-fluid">
            <div class="navbar-header">
                <span class="navbar-brand">Apollo</span>
            </div>

            <form (submit)="searchContent()" class="navbar-form navbar-left">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Keyword" name="keyword" [(ngModel)]="keyword">
                </div>
                <button type="submit" class="btn btn-default">Search Content</button>
            </form>

            <form (submit)="searchUser()" class="navbar-form navbar-left">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Username" name="user" [(ngModel)]="user">
                </div>
                <button type="submit" class="btn btn-default">Search User</button>
            </form>

            <ul class="nav navbar-nav navbar-form navbar-right">
                <li>
                    <button class="btn btn-danger" (click)="reset()">Clear</button>
                </li>
            </ul>
        </div>
    </nav>

    <div class="sidebar" style="opacity: .9;">
        <ul class="list-group" style="height: 100%; overflow:hidden; overflow-y:scroll;">
            <li class="list-group-item animated fadeIn" *ngFor="let t of entries"
                [ngClass]="{'list-group-item-success': t.sentiment > 0, 'list-group-item-danger': t.sentiment < 0}">
                <strong>{{ t.user }} says: </strong>
                <small>(on {{ t.time }})</small>
                <br>
                {{ t.content }}
            </li>
        </ul>
    </div>

    <sebm-google-map
            [latitude]="lat"
            [longitude]="lng"
            [zoom]="12">

        <sebm-google-map-marker
                *ngFor="let t of tweets"
                [latitude]="t.lat"
                [longitude]="t.lng"
                [iconUrl]="t.iconUrl">

            <sebm-google-map-info-window style="opacity: .85;">
                <strong>{{ t.user }} says: </strong>
                <small>(on {{ t.time }})</small>
                <br>
                {{ t.content }}
            </sebm-google-map-info-window>
        </sebm-google-map-marker>
    </sebm-google-map>
</div>
